<template>
  <div class="report-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="icon-panel" shadow="never">
          <div slot="header">
            <p>告警类型占比</p>
            <el-radio-group v-model="alertType" style="margin-bottom: 30px">
              <el-radio-button label="all">全部告警</el-radio-button>
              <el-radio-button label="temperature">温度告警</el-radio-button>
              <el-radio-button label="infrared">红外告警</el-radio-button>
              <el-radio-button label="video">视频告警</el-radio-button>
              <el-radio-button label="other">其他告警</el-radio-button>
            </el-radio-group>
          </div>
          <vab-chart :autoresize="true" :options="zgdt" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="icon-panel" shadow="never">
          <div slot="header">
            <p>房间告警占比</p>
            <el-radio-group v-model="roomAlertType" style="margin-bottom: 30px">
              <el-radio-button label="all">全部房间</el-radio-button>
              <el-radio-button label="temperature">第一库房</el-radio-button>
              <el-radio-button label="infrared">第二库房</el-radio-button>
              <el-radio-button label="video">第三库房</el-radio-button>
              <el-radio-button label="other">第四库房</el-radio-button>
            </el-radio-group>
          </div>
          <vab-chart
            :autoresize="true"
            theme="vab-echarts-theme"
            :options="rmdt"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VabChart from '@/plugins/echarts'
export default {
  components: {
    VabChart,
  },
  data() {
    return {
      alertType: 'all',
      roomAlertType: 'all',
      roomAlertDatas: [
        { p: '65.76%', value: 121, name: '第一库房' },
        { p: '17.93%', value: 33, name: '第二库房' },
        { p: '9.78%', value: 18, name: '第三库房' },
        { p: '6.52%', value: 12, name: '第四库房' },
      ],
      alertDatas: [
        { p: '13.19%', value: 12, name: '温度告警' },
        { p: '36.26%', value: 33, name: '红外告警' },
        { p: '30.77%', value: 28, name: '视频告警' },
        { p: '19.78%', value: 18, name: '其他告警' },
      ],
      zgdt: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        title: {
          text: '告警数量',
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['温度告警', '红外告警', '视频告警', '其他告警'],
        },
        color: ['#409EFF', '#F56C6C', '#67C23A', '#E6A23C'],
        series: [
          {
            name: '告警数量',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '30',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
        graphic: {
          type: 'group',
          top: 'middle',
          left: 'center',
          height: 80,
          children: [
            {
              type: 'text',
              left: 'center',
              top: '30%',
              style: {
                text: '告警占比',
                textAlign: 'center',
                textVerticaAlign: 'middle',
                fill: '#999',
                font: "15px 'Helvetica',sans-serif",
              },
            },
            {
              type: 'text',
              top: '60%',
              left: 'center',
              position: [0, 10],
              style: {
                text: '91',
                textAlign: 'center',
                textVerticaAlign: 'middle',
                fill: '#3d383a',
                font: "22px 'Helvetica',sans-serif",
              },
            },
          ],
        },
      },

      rmdt: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        title: {
          text: '告警数量',
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['第一库房', '第二库房', '第三库房', '第四库房'],
        },
        color: ['#409EFF', '#F56C6C', '#67C23A', '#E6A23C'],
        series: [
          {
            name: '告警数量',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '30',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
        graphic: {
          type: 'group',
          top: 'middle',
          left: 'center',
          height: 80,
          children: [
            {
              type: 'text',
              left: 'center',
              top: '30%',
              style: {
                text: '告警占比',
                textAlign: 'center',
                textVerticaAlign: 'middle',
                fill: '#999',
                font: "15px 'Helvetica',sans-serif",
              },
            },
            {
              type: 'text',
              top: '60%',
              left: 'center',
              position: [0, 10],
              style: {
                text: '184',
                textAlign: 'center',
                textVerticaAlign: 'middle',
                fill: '#3d383a',
                font: "22px 'Helvetica',sans-serif",
              },
            },
          ],
        },
      },
    }
  },
  created() {
    this.initAlert()
    this.initRoomAlert()
  },
  methods: {
    initRoomAlert() {
      this.rmdt.series[0].data = this.roomAlertDatas
      let _this = this
      this.rmdt.legend.formatter = function (item) {
        let i = 0
        switch (item) {
          case '第一库房':
            i = 0
            break
          case '第二库房':
            i = 1
            break
          case '第三库房':
            i = 2
            break
          case '第四库房':
            i = 3
            break
        }
        return (
          item +
          '    ' +
          _this.roomAlertDatas[i].p +
          _this.$baseLodash.padStart(_this.roomAlertDatas[i].value, '10', ' ')
        )
      }
    },
    initAlert() {
      this.zgdt.series[0].data = this.alertDatas
      let _this = this
      this.zgdt.legend.formatter = function (item) {
        let i = 0
        switch (item) {
          case '温度告警':
            i = 0
            break
          case '红外告警':
            i = 1
            break
          case '视频告警':
            i = 2
            break
          case '其他告警':
            i = 3
            break
        }
        return (
          item +
          '    ' +
          _this.alertDatas[i].p +
          _this.$baseLodash.padStart(_this.alertDatas[i].value, '10', ' ')
        )
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.report-container {
  padding: 0 !important;
  margin: 0 !important;
  background: #f5f7f8 !important;
}

.echarts {
  width: 100%;
}
</style>